<template>
  <div class="sys-topBtn">
    <div>
      <div class="ulNameBox" v-show="showInput">
        <div class="showInputClose">
          <span @click=" showInput = false">x</span>
        </div>
        <Title style="margin-top:50px">
            <slot>
                <p style="margin-left:20px">
                    {{showInputTitle}}
                </p>
            </slot>
        </Title>
        <ul>
          <li>
            <el-input
              ref="saomaInput"
              size="mini"
              v-model="deliveryEmpCode"
              placeholder="请输入内容"
            ></el-input>
            <span>配送人编号：</span>
          </li>
          <li>
            <el-input
              size="mini"
              v-model="deliveryEmpName"
              placeholder="请输入内容"
            ></el-input>
            <span>配送人：</span>
          </li>
        </ul>
        <div style="text-align:center">
          <el-button size="mini" type="primary" @click="confirmChangeInfoBtn">保存</el-button>
          <el-button size="mini" type="primary" @click="showInput = false">取消</el-button>
        </div>
      </div>
      <div style="margin:5px 0">
        <el-button size="mini" type="primary" @click="addInfoBtn"
          >新增</el-button
        >
        <el-button size="mini" type="primary" @click="changeInfoBtn"
          >修改</el-button
        >
        
        <el-button size="mini" type="danger" @click="deleteInfoBtn"
          >删除</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { sysDpInsertTableData,sysDpUpdateTableData,sysDpDeleteTableData } from "@/utils/api.js";
import Title from "../../../../../components/TableTitle.vue"
export default {
  name: "SysTopBtn",
  components:{
    Title
  },
  data() {
    return {
      // 操作弹窗
      showInput:false,
      // 弹窗title
      showInputTitle:'',
      deliveryEmpCode: "",
      deliveryEmpName: "",
      // 确认按钮内容
      btnValue: "",
      cheakInfo: [],
      deleteList: [],
    };
  },
  methods: {
    // 新增按钮
    addInfoBtn() {
      this.showInput = true
      this.showInputTitle = '新增编辑'
      this.btnValue = '确认新增'
      // 清空所有input
      this.deliveryEmpCode = ""
      this.deliveryEmpName = ""
      // 开放所有input
      this.ismsCarId = false
    },
    // 修改按钮
    changeInfoBtn() {
      // console.log(this.cheakInfo.length,this.cheakInfo)
      if (this.cheakInfo.length == 1) {
        this.showInput = true
        this.showInputTitle = '修改编辑'
        this.btnValue = "确认修改"
        this.ismsCarId = true
        // this.deliveryEmpCode = ""
        // this.deliveryEmpName = ""
        this.deliveryEmpCode = this.cheakInfo[0].deliveryEmpCode
        this.deliveryEmpName = this.cheakInfo[0].deliveryEmpName
      }else {
        this.$Alert({
          title: "失败",
          message: "请勾选一条数据进行修改！",
          type: "error",
        });
      }
    },
    // 确认按钮
    confirmChangeInfoBtn() {
      if (this.btnValue == "确认修改") {
        sysDpUpdateTableData({
          msDeliveryCrewId:this.cheakInfo[0].msDeliveryCrewId,
          deliveryEmpCode:this.deliveryEmpCode,
          deliveryEmpName:this.deliveryEmpName,
        }).then((res) => {
          console.log("修改", res);
          if (res.data.retCode == 200) {
            this.$Alert({
              title: "成功",
              message: res.data.message,
              type: "success",
            });
            // 关闭弹窗
            this.showInput = false
            // 修改刷新Table并定位页数
            this.$bus.$emit("sysDpRefreshTable", "刷新");
          } else {
            this.$Alert({
              title: "失败",
              message: res.data.message,
              type: "error",
            });
          }
        });
      } else if (this.btnValue == "确认新增") {
        sysDpInsertTableData({
          deliveryEmpCode:this.deliveryEmpCode,
          deliveryEmpName:this.deliveryEmpName
        }).then((res) => {
          if (res.data.retCode == 200) {
            this.$Alert({
              title: "成功",
              message: res.data.message,
              type: "success",
            });
            // 关闭弹窗
            this.showInput = false
            // 修改刷新Table并定位页数
            this.$bus.$emit("sysDpRefreshTable", "刷新");
          } else {
            this.$Alert({
              title: "失败",
              message: res.data.message,
              type: "error",
            });
          }
        });
      }
    },
    // 删除按钮
    deleteInfoBtn() {
      sysDpDeleteTableData({
        msDeliveryCrewId: this.deleteList,
      }).then((res) => {
        if (res.data.retCode == 200) {
          this.$Alert({
            title: "成功",
            message: res.data.message,
            type: "success",
          });
          // 刷新Table并定位页数
          this.$bus.$emit("sysDpRefreshTable", "刷新");
        } else {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
    // 接收表格勾选信息 ---修改 -- 删除  
      this.$bus.$on('sysDpChange',(e)=>{
          this.cheakInfo = e
          this.deleteList = []
          for (let i = 0; i < e.length; i++) {
            this.deleteList.push(e[i].msDeliveryCrewId);
          }
      })
  },
};
</script>
<style scoped>
.sys-topBtn {
  width: 100%;
  /* overflow: hidden; */
}
.ulNameBox {
  position: relative;
  width: calc(100% - 200px);
  height: calc(100% - 60px);
  position: absolute;
  top: 60px;
  left: 200px;
  z-index: 99;
  background: white;
}
.showInputClose {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
.ulNameBox ul {
    margin-top: 5px;
    overflow: hidden;
}
.ulNameBox ul li {
  float: left;
  width: 21%;
  height: 30px;
  line-height: 30px;
  margin-right: 1%;
  margin-bottom: 5px;
  overflow: hidden;
}
.ulNameBox ul li span {
  float: right;
}
.ulNameBox ul li div {
  float: right;
}
.el-input {
  width: 130px;
}
</style>